<template>
	<view>
		<mescroll-body height="500px" :sticky="true" :down="down" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="sticky-tabs">
				<view class="searchBar">
					<uni-icons style="font-size: 40rpx;" @click="back" type="left" color="#000" size="40"></uni-icons>
					<view class="input-view">
						<view class="my-nearby">
							<view>我的</view>
							<view>附近</view>
						</view>
						<view class="zhu-text">住</view>
						<view class="days" @click="showCaledar = !showCaledar">{{days}}</view>
						<view class="lines"></view>
						<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
							@input="searchText" placeholder-class="placestyle" v-model="queryText"  @confirm="confirm">
						<view class="search-btn" @click="handleSerach">搜索</view>
					</view>
				</view>
				<hotelSearchBox @searchResult="searchResult" :bg="'#F5F7F8'"></hotelSearchBox>
			</view>
				<view class="hotel-content-list" v-show="data.length>0">
					<view class="list">
						<view class="item-list" v-for="(item,index) in data" :key="index" @click="todetail(item)">
							<image class="hotel-img" :src="item.mainImage" @error="ImageError($event,item)" mode="aspectFill"></image>
							<view class="right-hotel-info">
								<view class="hotel-title">
									{{item.hotelName}}
								</view>
								<!-- <view class="score-lines">
									<view class="pingfen">
										<uni-rate :size="18" allowHalf :touchable="false" :value="item.avgScore" disabled disabledColor="#EF5233"/>
										<text>{{item.avgScore}}</text>
									</view>
									<view class="nums">{{item.content_num}}条评论</view>
								</view> -->
								<view class="address">
									<text class="tag">{{start[item.avgScore]}}</text> 距您直线{{item.distance/1000}}公里
								</view>
								<view class="price-lines">
									<view class="line"></view>
									<view>
										<text>￥</text><text class="price">{{item.startingPrice}}</text><text>元</text><text
											style="color: #656667;">起</text>
									</view>
									
								</view>
							</view>
						</view>
					</view>
				</view>
			<!-- </view> -->
		</mescroll-body>
		<!-- </roc-scroll> -->
		<calendar @change="changeDays" :modal="true" :show="showCaledar"></calendar>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import publicData from './public/public.js'
	import calendar from '../../components/date-picker/date-picker'
	import { mapState } from 'vuex'//引入mapState
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			calendar
		},
		computed: {
			  ...mapState({'userLocation':'userLocation'}),
		},
		data() {
			return {
				keyname: '',
				isfixed: false,
				visible_height: 60,
				solt_height: 0,
				page: 0,
				hasMore: true,
				data: [],
				data_number: 0,
				start: [
					"",
					"一星级",
					"二星级",
					"三星级",
					"四星级",
					"五星级",
					"经济型",
					"舒适型",
					"高档型",
					"豪华型",
				],
				days: "",
				showCaledar: false,
				count:1,
				down: {
					auto: false
				},
				queryText:""
			}
		},
		onLoad(option) {
			this.queryText = option.queryText
			publicData.screeningCondition.queryText =  option.queryText
			publicData.screeningCondition.sort = '4'
			this.days = this.$util.newDayDate(new Date())
			var o = publicData.screeningCondition.checkInDate.split("-")[2]
			var t = publicData.screeningCondition.checkOutDate.split("-")[2]
			this.days = o + '-'+t
			
		},
		onPageScroll(data) {
			// console.log(data)
			if (data.scrollTop > 100) {
				this.isfixed = true
			} else {
				this.isfixed = false
			}
		},
		methods: {
			ImageError(e,item){
				item.mainImage = 'https://qiniu-cdn.maeiyun.com/imgs/hotel/error-2.png'
			},
			/*下拉刷新的回调 */
			downCallback() {
				publicData.screeningCondition.pageIndex = 1
				this.data = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				publicData.screeningCondition.cityName = this.userLocation.cityname
				publicData.screeningCondition.longitude = this.userLocation.longitude
				publicData.screeningCondition.latitude = this.userLocation.latitude
				this.request.httpTokenRequest({
					url: "hotel/index",
					method: 'post'
				}, publicData.screeningCondition).then(res => {
					if (res.code == 0) {
						this.data = [...this.data, ...res.data.data.hotelList];
						publicData.screeningCondition.pageIndex++
						this.data_number = this.data.length
						this.mescroll.endSuccess(this.data.length,this.data.length == res.data.data.count?false:true); // 隐藏加载状态栏
					}
				}, error => {
					this.mescroll.endErr();
				})
				
			},
			getScreenSize() {
				uni.getSystemInfo({
					success: (res) => {
						// console.log('屏幕宽度：', res);
						const screenWidth = res.windowWidth; // 屏幕宽度，单位为px
						const screenHeight = res.windowHeight; // 屏幕高度，单位为px
						this.getBoxSize(screenHeight)

					},
				});
			},
			getBoxSize(screenHeight) {
				var that = this
				uni.createSelectorQuery()
					.select('.searchBar') // 选择你要获取尺寸的盒子元素，这里假设盒子元素的class为box
					.boundingClientRect((rect) => {
						const boxWidth = rect.width; // 盒子的宽度，单位为px
						const boxHeight = rect.height; // 盒子的高度，单位为px
						// that.visible_height = (screenHeight - boxHeight).toFixed(2)
					})
					.exec();
			},
			changeDays(data) {
				if(this.count  == 1){
					
				}else{
					publicData.screeningCondition.checkInDate = data.choiceDate[0].year + '-' + data.choiceDate[0].month +
						'-' + data.choiceDate[0].day
					publicData.screeningCondition.checkOutDate = data.choiceDate[1].year + '-' + data.choiceDate[1].month +
						'-' + data.choiceDate[1].day
					publicData.screeningCondition.days = data.dayCount
					this.days = data.choiceDate[0].day +'-'+data.choiceDate[1].day
					
				}
				this.downCallback()
				this.count++
				
			},
			searchResult() { //搜索结果
				this.downCallback()
			},
			back() {
				uni.navigateBack()
			},
			todetail(item) {
				uni.navigateTo({
					url: '/otherpages/hotel/hotelDetail?id=' + item.hotelID+'&img='+item.mainImage
				})
			},
			confirm() {
				this.downCallback()
			},
			handleSerach() {
				this.downCallback()
			},
			searchText(data) {
				publicData.screeningCondition.queryText = data.detail.value
			}
		}
	}
</script>

<style lang="scss">
	.sticky-tabs{
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}
	// .fixed-top-content {
	// 	position: fixed;
	// 	top: 0;
	// 	right: 0;
	// 	padding: 0 30rpx;
	// 	background-color: #fff;
	// 	z-index: 1000;
	// }

	.searchBar {
		padding: var(--status-bar-height) 0 22rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: rgb(245, 247, 248);
	}

	.input-view {
		width: 637rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-radius: 15px;
		flex-wrap: nowrap;
		border: 1rpx solid #EF5233;
		padding: 0 10rpx 0 27rpx;
		height: 68rpx;
		box-sizing: border-box;
		margin-left: 34rpx;

		.my-nearby {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FC7808;
		}

		.zhu-text {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
			margin: 0 10rpx;
		}

		.days {
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FC7808;
		}

		.lines {
			width: 1rpx;
			height: 34rpx;
			background-color: #CACACA;
			margin: 0 10rpx;
		}
	}

	.nav-bar-input {
		height: 60rpx;
		line-height: 60rpx;
		width: 40%;
		font-size: 14px;
		background-color: #fff;
	}

	.placestyle {
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #AEAEB0;
	}

	.search-btn {
		width: 103rpx;
		height: 50rpx;
		background: #EF5233;
		border-radius: 32rpx;
		backdrop-filter: blur(10px);
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 50rpx;
		/* margin-top: 7rpx; */
		margin-left: auto;
	}

	//
	.hotel-content-list {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.list {
		background-color: #F5F7F8;
	}

	.item-list {
		display: flex;
		align-items: flex-start;
		margin-bottom: 32rpx;
		padding: 30rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.hotel-img {
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
			margin-right: 25rpx;
			flex: 0 0 auto;
		}
		.right-hotel-info {
			flex: 1;
			.hotel-title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #2A2B2E;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				.tag {
					display: inline-block;
					width: 80rpx;
					background: #D8D8D8;
					text-align: center;
					font-size: 20rpx;
					color: #727272;
					line-height: 28rpx;
					margin-left: 10rpx;
					padding: 2rpx 0;
				}
			}
			.score-lines {
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				box-sizing: border-box;
				.pingfen {
					min-width: 127rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 8rpx;
					height: 30rpx;
					line-height: auto;
					text {
						font-size: 22rpx;
						color: #EF5233;
						line-height: 30rpx;
					}
				}

				.nums {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #656667;
					margin-left: 18rpx;
				}
			}

			.address {
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #969696;
				margin: 10rpx 0;
			}

			.tits {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;

				.item-tit {
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 1rpx solid #DCE1FA;
					padding: 2rpx 10rpx;
					font-size: 20rpx;
					color: #3E5ADE;
					line-height: 28rpx;
					margin: 5rpx;
				}
			}

			.price-lines {
				font-size: 18rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #EE2300;
				display: flex;
				align-items: center;
				.line {
					flex: 1;
					height: 39rpx;
					background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(239,82,51,0.21) 100%, #D8D8D8 100%);
					opacity: 0.25;
				}
				.price {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EC2700;
				}
				view{
					display: flex;
					align-items: baseline;
				}
			}


		}
	}
</style>